<template>
  <div class="main">
    <div id="container"></div>
    <div id="container2"></div>
  </div>
</template>
<script>
import { Chart } from '@antv/g2'
export default {
  mounted() {
    const data = [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 }
    ]
    const data2 = [
      {
        task: 'task0',
        startTime: '2018-04-18 01:17:12',
        endTime: '2018-04-18 01:19:10',
        dataStatus: 0
      },
      {
        task: 'task1',
        startTime: '2018-04-18 01:18:15',
        endTime: '2018-04-18 01:19:20',
        dataStatus: 0
      },
      {
        task: 'task2',
        startTime: '2018-04-18 02:11:32',
        endTime: '2018-04-18 02:18:50',
        dataStatus: 0
      },
      {
        task: 'task3',
        startTime: '2018-04-18 02:18:50',
        endTime: '2018-04-18 03:16:38',
        dataStatus: 1
      },
      {
        task: 'task4',
        startTime: '2018-04-18 02:19:48',
        endTime: '2018-04-18 02:21:57',
        dataStatus: 1
      },
      {
        task: 'task5',
        startTime: '2018-04-18 03:16:38',
        endTime: '2018-04-18 03:19:38',
        dataStatus: 1
      },
      {
        task: 'task6',
        startTime: '2018-04-18 03:19:38',
        endTime: '2018-04-18 03:27:49',
        dataStatus: 0
      },
      {
        task: 'task7',
        startTime: '2018-04-18 07:29:37',
        endTime: '2018-04-18 07:33:01',
        dataStatus: 0
      },
      {
        task: 'task8',
        startTime: '2018-04-18 03:27:49',
        endTime: '2018-04-18 04:26:05',
        dataStatus: 1
      },
      {
        task: 'task9',
        startTime: '2018-04-18 04:26:05',
        endTime: '2018-04-18 06:06:36',
        dataStatus: 0
      },
      {
        task: 'task10',
        startTime: '2018-04-18 06:06:36',
        endTime: '2018-04-18 06:15:15',
        dataStatus: 0
      },
      {
        task: 'task11',
        startTime: '2018-04-18 03:27:49',
        endTime: '2018-04-18 03:34:50',
        dataStatus: 0
      }
    ]
    data2.forEach((obj)=>{
      obj.range = [new Date(obj.startTime), new Date(obj.endTime)];
    })

    // 初始化图表实例
    const chart = new Chart({
      container: 'container'
    })
    chart
      .interval() // 创建一个 Interval 标记
      .data(data) // 绑定数据
      .encode('x', 'genre') // 编码 x 通道
      .encode('y', 'sold') // 编码 y 通道
      .coordinate({ transform: [{ type: 'transpose' }] })
    // 渲染可视化
    chart.render()
    const chartGantt = new Chart({
      container: 'container2'
    })
    chartGantt
      .interval()
      .data(data2)
      .encode('x', 'task') // 编码 x 通道
      .encode('y', 'range') // 编码 y 通道
      .coordinate({ transform: [{ type: 'transpose' }] })
      .encode('color',(d)=>(d.dataStatus==0?'success':'fail'))
      .scale('color',{range:['green','red']})
    chartGantt.render()
    // 声明可视化
  }
}
</script>

<style lang="scss" scoped>
</style>
